*{margin:0px; padding: 0px;}
html,body,.fr-fullscreen{height: 100%; width: 100%;}
ul,li{list-style: none;}
a{text-decoration: none; color: #000;}
.fr-container{margin:0 auto;}
input[type=text],input[type=password]{outline: none;}

.headline{font-family: "微软雅黑";}

/*************对齐************/
.fr-align-left{text-align: left;}
.fr-align-center{text-align: center;}
.fr-align-right{text-align: right;}
.fr-vlign-top{vertical-align: top;}
.fr-vlign-middle{vertical-align: middle;}
.fr-vlign-bottom{vertical-align: bottom;}
.fr-center{display: table-cell;}
.fr-table{display:table;}
.fr-table-cell{display:table-cell;}

/*********定位************/
.fr-position-relative{position: relative;}
.fr-position-absolute{position: absolute;}
.fr-position-right{right: 0;}
.fr-position-left{left: 0;}
.fr-position-top{top: 0;}
.fr-position-bottom{bottom: 0;}
.fr-toast{position: fixed; bottom: 30%; padding: 10px; border-radius: 3px; background: rgba(0,0,0, 0.7); color: #EFEFEF; left: 0; right: 0; text-align: center; margin: 0 auto;}
.fr-mask{position: absolute;top: 0; left: 0; background: rgba(0,0,0, 0.6); display: none; z-index: 15;}
/********通用-颜色相关********/
.fr-hide{display: none;}
.fr-clear{clear: both;}
.fr-btn-red{background-color: #FF5722;}
.fr-btn-blue{background-color: #1E9FFF;}
.fr-btn-orange{background-color: #FFB800;}
.fr-btn-gray{background-color: #009688;}
.fr-circle{width: 12px; height: 12px; border-radius: 50%; display: inline-block;}
.fr-bg-black{background-color:black;}
.fr-bg-red{background-color:red;}
.fr-bg-green{background-color:green;}
.fr-bg-white{background-color:white;}
.fr-color-gray{color: gray;}

@media screen and (min-device-width: 640px) {
    /***********布局*************/
    .fr-col-1{width: 8%; display: inline-block;}
    .fr-col-2{width: 16%; display: inline-block;}
    .fr-col-3{width: 24%; display: inline-block;}
    .fr-col-4{width: 32%; display: inline-block;}
    .fr-col-5{width: 40%; display: inline-block;}
    .fr-col-6{width: 48%; display: inline-block;}
    .fr-col-7{width: 56%; display: inline-block;}
    .fr-col-8{width: 64%; display: inline-block;}
    .fr-col-9{width: 72%; display: inline-block;}
    .fr-col-10{width: 80%; display: inline-block;}
    .fr-col-11{width: 90%; display: inline-block;}
    .fr-col-12{width: 98%; display: inline-block;}

    /*************元素**************/
    .fr-row-title{background-color: #DDD; padding: 0 5px;}
    .fr-row{margin: .2em .3em;}
    .fr-padding-2em{padding: 0 0.2em;}
    .fr-row-40{height: 40px; line-height: 40px;}
    .fr-row-30{height: 30px; line-height: 30px;}
    .fr-btn{display: inline-block;height: 32px;line-height: 32px;padding: 0 12px;background-color: #FFF;color: #fff;white-space: nowrap;text-align: center;font-size: 14px;border: none;border-radius: 2px;cursor: pointer;}
    .fr-btn-sm{height: 25px; line-height: 25px; padding: 0 5px;}
    .fr-btn-red{background-color: #FF5722;}
    .fr-btn-blue{background-color: #1E9FFF;}
    .fr-btn-orange{background-color: #FFB800;}
    .fr-btn-gray{background-color: #009688;}
    .fr-row-margin10{margin: 10px 0;}
    .fr-row-margin5{margin: 5px 0;}
    .fr-col-margin5{margin: 0 5px;}
    .fr-col-margin10{margin: 0 10px;}
    .fr-row input[type=text], .fr-row input[type=password]{height: 2.5em; width: 100%; padding: .3em; outline:none; border: 1px solid #DDD;}
    .fr-section{border: 1px dashed #DDD; padding: 10px;}
    .fr-top-dashed{border-top: 1px dotted #DDD; margin-top: 10px;}
    .fr-progress-outer{height: 30px; border: 1px solid #DDD; line-height: 30px;}
    .fr-progress-bar{background-color: #EEE; text-align: center; width: 0%; height: 100%;}
    .fr-file-selector{text-align: center; width: 30px; height: 30px; line-height: 30px; cursor: pointer;background: url(file_icon.png) no-repeat center center; background-size: 60% auto;}
    .fr-file-chooser{margin: 7px 0;}
    .fr-txt-bold-32{font-size: 32px;}
    .fr-circle{width: 12px; height: 12px; border-radius: 50%; display: inline-block;}
    .fr-bg-black{background-color:black;}
    .fr-bg-red{background-color:red;}
    .fr-bg-green{background-color:green;}
    .fr-bg-white{background-color:white;}

    .fa{display: inline-block; width: 16px; height: 16px; background-size: contain; background-position: center center; background-repeat: no-repeat; vertical-align: middle;}
    .fa-address-card-o{background-image: url(address_icon.png);}
    .fa-online{background-image: url(online_icon.png);}
    .fa-offline{background-image: url();}
    .fa-male{background-image: url(user_icon.png);}
    .fa-clock-o{background-image: url(clock_icon.png);}
    /**********分页**************/
    .fr-page{height: 30px; line-height: 30px;}
    .fr-page-item{display: inline-block; margin: 0 2px; background-color: #FFF; border: 1px solid #CCC; padding: 0 15px; color: #666;}
    .fr-page-item:hover{background-color: #DDD;}
    .fr-page-active{background-color: #DDD;}

    .wifi-title{font-size: 2em; font-weight: bold;}
    .cur-login-box{border: 1px solid #DEDEDE;border-radius: 3px;background-color: #FFF; min-width: 450px;}

    .fr-admin-top{
        height: 80px;
        line-height: 80px;
        background-color: #CCC;
    }
    .fr-admin-bottom{
        position: absolute;
        bottom: 0;
        height: 30px;
        line-height: 30px;
        background-color: #CCC;
        width: 100%;
        font-size: 12px;
    }
    .fr-admin-bottom>span>span{display: inline-block; vertical-align: middle;}
    .fr-admin-middle{
        margin-bottom: 30px;
        position: relative;;
    }
    .fr-admin-menu{
        width: 200px;
        height: 100%;
        border-right: 1px solid #CCC;
        float: left;
    }
    .fr-admin-menu>ul>li{
        height: 50px;
        background-color: #DDD;
        line-height: 50px;
        text-align: center;
        border: 1px solid #CCC;
    }
    .fr-admin-menu>ul>li:hover{
        background-color: #EEE;
        cursor: pointer;;
    }
    .fr-admin-menu>ul>li.active{
        background-color: #EEE;
    }
    .fr-admin-menu>ul>li>a{
        display: inline-block;
        height: 100%;
        width: 100%;
        /* line-height: 100%; */
    }
    .fr-admin-main{
        height: 100%;
        overflow:auto;
        float: left;
        margin: 10px; 
    }
}


@media screen and (max-device-width: 640px) {
    .fr-admin-menu{
        position: fixed;
        top: 50%;
        left: 50%;
        display: none;
        z-index: 20;
        border-radius: .3rem;
        transform: translate(-50%, -50%);
    }
    .fr-admin-menu>ul>li{
        height: 2rem;
        background-color: #EFEFEF;
        line-height: 2rem;
        text-align: center;
        margin: 0 auto;
        padding: .2rem .5rem;
        border: 1px solid #DDD;
        border-top: 0;
    }
    .wifi-title{font-size: 1em; font-weight: bold;}
    .wifi-instruction{ font-size: .8rem; color: gray; text-align: left; text-indent: 2rem;}
    #wifi_list{margin: 1rem; padding: .5rem;}
    #wifi_list>div{height: 2rem; line-height: 2rem;}
    .wifi-login-label{width: 5rem; display: inline-block;}
    .cur-login-box>li:last-child{margin: .5rem auto;}
    #filepath{line-height: 1.5rem;}
    .fr-admin-menu>ul>li:first-child{border-top: 1px solid #DDD;}
    .fr-admin-bottom{display: none;}
    .fr-admin-top{height: 3rem; line-height: 3rem; background-color: lime; position: relative;}
    .fr-admin-top img{vertical-align: middle; margin-top: -0.5rem;}
    .fr-menu{position: absolute; top: 1rem; right: 1rem;display: inline-block; height: 1rem; width: 1rem; background: url(menu_icon.png) center center no-repeat; background-size: cover;}
    .fr-admin-update-control ul{margin: .5rem;}
    .fr-admin-update-control ul>li{height: 2rem; line-height: 2rem; text-align: left;}
    .fr-admin-update-control ul>li>span{display: inline-block; vertical-align: middle;}
    .fr-progress-outer{width: 10rem; height: 1.5rem; border: 1px solid #EEE;}
    .fr-admin-update-control input[type=file]{display: none;}
    .fr-btn{border-radius: .1rem; padding: 0 .5rem; display: inline-block;}
    .fr-file-chooser{display: inline-block; width: 1.5rem; height: 1.5rem; background: url(file_icon.png) center center no-repeat; background-size: contain;}
    
    /*************网络设置***************/
    .fr-admin-user-control{margin: 1rem;}
    .fr-admin-user-control .fr-row{height: 2rem; line-height: 2rem;}
    .fr-admin-user-control .fr-row>span{display: inline-block;}
    .fr-admin-user-control .fr-section .fr-row>span:first-child{width: 5rem; text-align: right;}
    .fr-row input[type=text], .fr-row input[type=password]{border:0;border-bottom: 1px solid #EEEE; height: 1.5rem; line-height: 1.5rem;}
    .fr-admin-user-control>div>.fr-row{margin-top: 1rem;}
    fieldset{border: 1px solid #EFEFEF; border-radius: .2rem; padding: 1rem 0;}
    /*************用户管理***************/
    .fr-admin-user-area{height: 2rem; line-height: 2rem; margin: 1rem;}
    .cur-login-box{border: 1px solid #DEDEDE;border-radius: 3px;background-color: #FFF; width: 80%; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 1rem;}
    .cur-login-box>li{line-height: 2rem;}
    /*************端口控制***************/
    .fr-admin-ports-control fieldset{margin: .5rem;}
    .fr-admin-ports-control fieldset>div{line-height: 2rem; margin: 0 .5rem;}
    .fr-admin-ports-control .fr-btn{height: 1.5rem; line-height: 1.5rem;}
    #system_control{margin: 1rem; text-align: left;}
    #system_control>div>div>span:last-child{display: block;}
    #control_btns div{display: inline-block; margin-bottom: 1rem;}
    #port_control>div>div:first-child{text-align: left;}
    #port_control>div>div>span{display: inline-block;}
    #port_control>div>div>span:first-child{width: 6.5rem;}
    #port_control>div>div>span:last-child{width: 100%; text-align: center;}
    #ir_control>fieldset div.fr-row-margin5>span:first-child{display: inline-block; width: 6.5rem;}
}